// 长列表这功能属于我自己原创的，用了很多种思路，踩了很多坑。
// 第一种：把1000条数据放在Page外面，然后把显示的100条数据放在Page里面，通过
// upper-threshold="1500" lower-threshold="1500" bindscrolltolower="lower" 
// bindscrolltoupper="upper"判断用户上滑还是下滑，来进行追加,但是这种效果不行，因为用户猛滑，方法会失灵
// 第二种：也是把1000条数据放在外面，通过Scroll滚动来显示数据，这种方法可行，
// 但是我觉得这方法还可以更加优化，因为每次判断上滑下滑，总觉得还有更好的方式。
// 第三种，也是我现在的办法，把list弄成一个二维数组，然后WXML不用For循环，写四个元素，根据
// 下标来显示，然后我通过滚动来改变下标即可实现，更改下标的时候，赋值不要用i + 1
// 直接用滑动的距离除以元素高度再除以一个二维数组里有多少个元素，再赋值就实现此功能了，并且这方法还不用判断上滑下滑。

const GROUP_SIZE = 25; // 每组多少条
const ITEM_HEIGHT = 50; // 每条高度
const WINDOW_GROUP_COUNT = 4; // 可视窗口渲染组数

Page({
  data: {
    list: [],
    i: 0
  },

  onLoad() {
    this.init();
  },

  init() {
    const list = [];
    for (let i = 1; i <= 1000; i++) {
      list.push({
        name: "LeeYaMaster",
        avatar: "/color_pro_img/avatar/1.jpg",
        time: "LeeYa sama" + i,
      });
    }
    const groupedList = this.format(list);
    this.setData({
      list: groupedList
    });
  },

  format(data) {
    // 1000条数据，将每25条分为一组，形成二维数组
    const list = [];
    for (let i = 0; i < data.length; i += GROUP_SIZE) {
      list.push({
        i, // 仅用于调试
        data: data.slice(i, i + GROUP_SIZE)
      });
    }
    return list;
  },

  scroll(event) {
    const { scrollTop } = event.detail;
    // 计算当前滚动到第几个item
    const itemCount = scrollTop / ITEM_HEIGHT;
    // 计算当前应该显示第几个分组
    const groupIndex = Math.floor(itemCount / GROUP_SIZE);
    // 最大分组下标，防止越界
    const maxIndex = Math.max(0, this.data.list.length - WINDOW_GROUP_COUNT);
    if (groupIndex > maxIndex) return;
    if (groupIndex !== this.data.i) {
      this.setData({
        i: groupIndex
      });
    }
  }
})